@import "colors";

.gradient-header {
  @extend .gradient-orange-purple-navy;
  // background-image: linear-gradient(135deg, #0F0433 20%, #68145C 50%, #F88D2B 100%);
  background-image: linear-gradient(135deg, #0F0433 20%, #2D2252 40%, #68145C 50%, #F88D2B 100%);
}

.gradient-footer {
  @extend .gradient-orange-purple-navy;
  background-image: linear-gradient(135deg, #0F0433 20%, #2D2252 40%, #68145C 50%, #F88D2B 100%);
}

// Card with content, round borders, shadow and background
.mosaic-card {
  padding: 0 1.3rem;
  border-radius: 1rem;

  h2.mosaic-card-title {
    font-size: 1.3rem;
    padding-top: 1.1rem;
    padding-bottom: 0.6rem;
    position: relative;
    text-align: left;

    &::after {
      left: 0;
      bottom: 0;
      right: 0;
      content: "";
      height: 3px;
      position: absolute;
      border-radius: 1rem;
    }
  }

  h3.mosaic-card-subtitle {
    font-size: 1rem;
  }
}
.mosaic-card-light {
  @extend .mosaic-card;
  background-color: #fff;
  box-shadow: 0.4rem 0.5rem 0.5rem rgba(45, 44, 47, 0.1);

  h2.mosaic-card-title {
    color: $mosaic-navy;

    &::after {
      background-image: linear-gradient(-45deg, #f1edf4, #fff);
    }
  }
}
.mosaic-card-dark {
  @extend .mosaic-card;
  background-color: #ede9f0;
  background-image: linear-gradient(-45deg, #e5e0ea, #fefdff);
  box-shadow: 0.2rem 0.3em 0.2rem rgba(24, 21, 30, 0.17), inset 0 0 1px #aaa;

  h2.mosaic-card-title {
    color: $mosaic-navy;

    &::after {
      background-image: linear-gradient(90deg, #F88D2B, #2D2252);
    }
  }

  h3.mosaic-card-subtitle {
    text-shadow: 1px 1px 0 rgba(255,255,255,0.8);
  }
}

.card {
  border: 0;
  border-radius: 1rem;
  background-color: #ede9f0;
  background-image: linear-gradient(-45deg, #efedf4, #fdfdff 60%);
  box-shadow: 0.1rem 0.2em 0.3rem rgba(24, 21, 30, 0.12), inset 0 0 1px #a59fb0;
  &:hover {
    box-shadow: 0.1rem 0.2em 0.3rem rgba(24, 21, 30, 0.12), inset 0 0 1px #a59fb0;
  }
}
section:nth-of-type(2n + 1) {
  .card {
    background-image: linear-gradient(-45deg, #efedf4, #fff);
    box-shadow: 0.1rem 0.2em 0.3rem rgba(24, 21, 30, 0.12), inset 0 0 1px #70697d;
    &:hover {
      box-shadow: 0.1rem 0.2em 0.3rem rgba(24, 21, 30, 0.12), inset 0 0 1px #70697d;
    }
  }
}

